<template>
    <div class="topic">
        <h1>热门话题</h1>
        <!-- <img :src="img1" style="width: 340px;height:200px;"> -->
        <!-- <img :src="img2" style="width: 340px;height:200px;"> -->
        <div class="topiccontent" v-for="(item,index) in title" :key="index">
            <p><span style="color: hsl(199, 93%, 64%);font-size: 0.32rem;">#</span> {{item}}</p>
        </div>
        <div class="swiper-container" id="swiper2">
            <div class="swiper-wrapper" id="swiper-wrapper2">
                <div class="swiper-slide" id="swiper-slide2" v-for="(item,index) in datas" :key="index">
                    {{item}}
                </div>
            </div>
            <div class="swiper-pagination" id="swiper-pagination2"></div>
        </div>
    </div>
</template>

<script>
    import { reactive, toRefs, onBeforeMount } from 'vue'
    import axios from 'axios'
    import Swiper, { Pagination, Autoplay } from 'swiper';
    import 'swiper/swiper-bundle.css';
    Swiper.use([Pagination, Autoplay]);
    export default {
        setup() {
            const state = reactive({
                title: [],
                datas: [1, 2, 3, 4]
            })
            const img1 = require('../assets/ds_img1.png')
            onBeforeMount(async () => {
                let res = await axios.get('http://localhost:3002/data/hotTopic.json').then(res => res.data.hot);
                res.forEach(e => {
                    state.title.push(e.title);
                });
                new Swiper('#swiper2', {
                    loop: true,
                    observer: true,
                    autoplay: {
                        delay: 3000,//延迟时长
                        stopOnLastSlide: false,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: '#swiper-pagination2',
                        clickable: true,//允许分页点击跳转
                    }
                });
            })
            return {
                ...toRefs(state), img1
            }
        }
    }
</script>
<style scoped>
    .topic {
        width: 7.5rem;
        height: 500px;
        margin-top: 0.2rem;
        padding: 0.15rem 0.28rem;
    }

    h1 {
        font-weight: bold;
        font-size: 0.34rem;
    }

    .topiccontent p {
        margin-top: 0.2rem;
        font-size: 0.27rem;
        font-weight: bold;
    }
#swiper2{
    width: 7rem;
    height: 300px;
    border-radius: 0.2rem;
}
#swiper-slide2{
    text-align: center;
    line-height: 3.3rem;
    font-size: 24px;
    color: blueviolet;
}
.swiper-pagination-bullet-active{
    background: black;
}
</style>